<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>Multi-Session Establishment using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">

    <style>
    audio,
    video {
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        vertical-align: top;
        width: 40%;
    }
    
    input {
        border: 1px solid #d9d9d9;
        border-radius: 1px;
        font-size: 1em;
    }
    
    select {
        border: 1px solid #d9d9d9;
        border-radius: 1px;
        height: 50px;
        margin-left: 1em;
        margin-right: -12px;
        padding: 1.1em;
        vertical-align: 6px;
    }
    
    p {
        padding: 1em;
    }
    </style>
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <script src="//cdn.webrtc-experiment.com/firebase.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
    </script>
</head>

<body>
    <article>
        <header style="text-align: center;">
            <h1>
                <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a> Multi-Session Establishment ®
                <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
            </h1>
            <p>
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <section class="experiment">
            <h2>Open Four Unique Sessions</h2>
            <button id="init-RTCMultiConnection">Open Multiple Sessions</button>
            <br />
            <br />

            <h2>Select and join a session:</h2>
            <select id="join-channel">
                <option>video-conferencing</option>
                <option>oneway</option>
                <option>audio-conferencing</option>
                <option>audio-oneway</option>
            </select>

            <button id="join-RTCMultiConnection">Join Session</button>

            <section id="connection-body"></section>
        </section>

        <script>
        var videoconferencing = new RTCMultiConnection('video-conferencing');
        var oneway = new RTCMultiConnection('oneway');
        var audioconferencing = new RTCMultiConnection('audio-conferencing');
        var audiooneway = new RTCMultiConnection('audio-oneway');

        videoconferencing.body = oneway.body = audioconferencing.body = audiooneway.body = document.getElementById('connection-body');

        videoconferencing.session = {
            audio: true,
            video: true
        };

        oneway.session = {
            audio: true,
            video: true,
            oneway: true
        };

        audioconferencing.session = {
            audio: true
        };

        audiooneway.session = {
            audio: true,
            oneway: true
        };

        document.getElementById('init-RTCMultiConnection').onclick = function() {
            this.disabled = true;
            videoconferencing.open({
                captureUserMediaOnDemand: false,
                onMediaCaptured: function() {
                    var videoStream = videoconferencing.attachStreams[0];

                    oneway.dontAttachStream = true;
                    oneway.attachStreams.push(videoStream);
                    oneway.open();

                    var audioStream = constructAudioStream(videoStream);

                    audioconferencing.dontAttachStream = true;
                    audioconferencing.attachStreams.push(audioStream);
                    audioconferencing.open();

                    audiooneway.dontAttachStream = true;
                    audiooneway.attachStreams.push(audioStream);
                    audiooneway.open();
                }
            });
        };

        document.getElementById('join-RTCMultiConnection').onclick = function() {
            this.disabled = true;

            var joinChannel = document.getElementById('join-channel').value;

            if (videoconferencing.channel == joinChannel) {
                videoconferencing.connect();
            }

            if (oneway.channel == joinChannel) {
                oneway.connect();
            }

            if (audioconferencing.channel == joinChannel) {
                audioconferencing.connect();
            }

            if (audiooneway.channel == joinChannel) {
                audiooneway.connect();
            }
        };

        function constructAudioStream(mediaStream) {
            var context = new AudioContext();
            var mediaStreamSource = context.createMediaStreamSource(mediaStream);

            var destination = context.createMediaStreamDestination();
            mediaStreamSource.connect(destination);

            return destination.stream;
        }
        </script>

        <section class="experiment">
            <h2>Why multi-sessions?</h2>
            <ol>
                <li>Sometimes you want to one-way broadcast your video for users who have no-camera or no-microphone</li>
                <li>You may want to allow audio-conferencing along with video-conferencing in the same session / same stream!</li>
                <li>You may want to open one-to-one ports between main-peer and the server to record speech or to further broadcast the stream
                </li>
                <li>You may want to allow end-users to anonymously join/view main-video session or chatting room</li>
                <li>You may want to open one-to-one private session between chairperson and CEO! — in the same session; same page!
                </li>
            </ol>
            There are
            <strong>many other</strong> use-cases of multi-sessions.
        </section>

        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>

        <section class="experiment own-widgets latest-commits">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a>
            </h2>
            <div id="github-commits"></div>
        </section>
    </article>
    <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>

    <footer>
        <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
        <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
        <a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
        <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
    </footer>

    <!-- commits.js is useless for you! -->
    <script src="//cdn.webrtc-experiment.com/commits.js" async>
    </script>
</body>

</html>